<template>
  <div class="login">
    <div class="header">
      <!-- 顶部 -->
      <van-nav-bar title="嗨购登录" @click-left="$router.push('/home')">
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 输入文本框 -->
    <div class="main">
      <van-cell-group>
        <van-field
          v-model="tel"
          label="手机号"
          placeholder="请输入手机号"
          autofocus
        />
      </van-cell-group>
      <van-cell-group border>
        <van-field
          v-model="password"
          :type="flag ? 'password' : 'text'"
          label="密码"
          placeholder="请输入密码.."
          :right-icon="flag ? 'closed-eye' : 'eye-o'"
          @click-right-icon="flag = !flag"
        />
      </van-cell-group>
    </div>
    <!-- 按钮 -->
    <div class="bottom">
      <van-button
        round
        type="info"
        size="large"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="login"
        >登录</van-button
      >
      <router-link to="/register">注册</router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
Vue.use(Toast);
import { doLogin } from "../../api/user";
import Vue from "vue";
import { Field, Cell, CellGroup, Button } from "vant";
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
export default {
  data() {
    return {
      tel: "",
      password: "",
      flag: true,
    };
  },
  methods: {
    login() {
      doLogin({ loginname: this.tel, password: this.password }).then((res) => {
        // console.log(res);
        switch (res.data.code) {
          case "10010":
            Toast("该用户不存在，请重新输入");
            break;
          case "10011":
            Toast("密码错误，请重新输入");
            break;
          case "200":
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userid", res.data.data.userid);
            this.$router.back();
            break;
          default:
            break;
        }
      });
    },
  },
};
</script>

<style scoped>
.bottom {
  width: 85%;
  margin: 10px auto;
}
</style>